<template>
  <div>
    <el-button type="primary" size="default"  v-print="printObj">打印</el-button>
    
    <div class="fsindex" id="printMe">
      <div class="fsindex-head" v-if="flow">
        <div class="fsindex-head-div">
          <div class="fsindex-head-div-status">
            <div>
              {{
                form.type == 1
                  ? "合同"
                  : form.type == 2
                  ? "预付款"
                  : form.type == 3
                  ? "违约金"
                  : form.type == 4
                  ? "额外费用"
                  : form.type == 5
                  ? "工序加工费"
                  : form.type == 6
                  ? "核价单变动"
                  : form.type == 7
                  ? "对账单付款"
                  : ""
              }}审批
            </div>
            <div
              :class="
                sponsor.status == 0
                  ? 'fsindex-head-div-status-blue'
                  : sponsor.status == 1
                  ? 'fsindex-head-div-status-success'
                  : sponsor.status == 2
                  ? 'fsindex-head-div-status-error'
                  : sponsor.status == 3
                  ? 'fsindex-head-div-status-withdraw'
                  : ''
              "
            >
              {{
                sponsor.status == 0
                  ? "审批中"
                  : sponsor.status == 1
                  ? "已通过"
                  : sponsor.status == 2
                  ? "已拒绝 "
                  : sponsor.status == 3
                  ? "已撤销"
                  : ""
              }}
            </div>
          </div>
          <div class="fsindex-head-div-user">
            <div class="">
              <el-image :src="sponsor.avatarurl"> </el-image>
              <div>
                {{ sponsor.username }}
              </div>
            </div>
            <div class="">
              审批编号：{{ sponsor.run_id }}_{{ sponsor.type }}
            </div>
          </div>
        </div>
      </div>

      <div class="fsindex-detail" v-if="form.type == 1 && flow">
        <div class="fsindex-detail-title">审批详情</div>
        <div class="fsindex-detail-content">
          <div>合同编号</div>
          <div>{{ obj.factory_contract_no }}</div>
        </div>
        <div class="fsindex-detail-content">
          <div>工厂</div>
          <div>{{ obj.factory_name }}</div>
        </div>
        <div class="fsindex-detail-content">
          <div>合同金额</div>
          <div>{{ obj.contract_amount }}</div>
        </div>
        <div class="fsindex-detail-content">
          <div>预付款</div>
          <div>{{ obj.advance_amount }}</div>
        </div>
        <div class="fsindex-detail-content">
          <div>理单员</div>
          <div>{{ obj.order_processor }}</div>
        </div>
        <div class="fsindex-detail-content" v-if="obj.fileid">
          <div>合同电子附件</div>
          <div
            @click="onLookContract(obj.fileid)"
            class="fsindex-detail-content-pdf pointer"
          >
            <el-image :src="pdf"></el-image>
            <div>{{ obj.factory_contract_no }}.pdf</div>
          </div>
        </div>
      </div>
      <div class="fsindex-detail" v-if="form.type == 2 && flow">
        <div class="fsindex-detail-title">审批详情</div>
        <div class="fsindex-detail-content">
          <div>供应商</div>
          <div>{{ obj.factory_name }}</div>
        </div>
        <div class="fsindex-detail-content">
          <div>合同编号</div>
          <div>{{ obj.factory_contract_no }}</div>
        </div>
        <div class="fsindex-detail-content">
          <div>费用信息</div>
          <div class="fsindex-detail-content-table">
            <div class="fsindex-detail-content-table-th">
              <div class="">合同金额</div>
              <div class="">预付款</div>
            </div>
            <div class="fsindex-detail-content-table-td">
              <div class="">
                {{ obj.contract_amount }}
              </div>
              <div class="">
                {{ obj.amount }}
              </div>
            </div>
          </div>
        </div>
        <div class="fsindex-detail-content">
          <div>申请日期</div>
          <div>{{ obj.createtime }}</div>
        </div>
        <div class="fsindex-detail-content">
          <div>说明</div>
          <div>{{ obj.remarks }}</div>
        </div>
        <div class="fsindex-detail-content" v-if="sponsor.relation">
          <div>关联审批</div>
          <div
            @click="onLookRelation(sponsor.relation)"
            class="fsindex-detail-content-pdf pointer"
          >
            <el-image :src="pdf"></el-image>
            <div>
              <div class="">
                {{ sponsor.relation.order_processor }}提交的合同申请
              </div>
              <div class="" style="color: #646a73; font-size: 12px">
                提交时间：{{ sponsor.relation.ti_time }}
              </div>
            </div>
            <div
              class=""
              :style="{
                color:
                  sponsor.relation.status == 0
                    ? '#3376FF'
                    : sponsor.relation.status == 1
                    ? '#41cb33'
                    : sponsor.relation.status == 2
                    ? '#D83A30'
                    : sponsor.relation.status == 3
                    ? '#999999'
                    : '',
              }"
            >
              {{
                sponsor.relation.status == 0
                  ? "审批中"
                  : sponsor.relation.status == 1
                  ? "已通过"
                  : sponsor.relation.status == 2
                  ? "已拒绝 "
                  : sponsor.relation.status == 3
                  ? "已撤销"
                  : ""
              }}
            </div>
          </div>
        </div>
      </div>
      <div class="fsindex-detail" v-if="form.type == 3 && flow">
        <div class="fsindex-detail-title">审批详情</div>
        <div class="fsindex-detail-content">
          <div>工厂名</div>
          <div>{{ obj.factory_name }}</div>
        </div>
        <div class="fsindex-detail-content">
          <div>合同编号</div>
          <div>{{ obj.factory_contract_no }}</div>
        </div>
        <div class="fsindex-detail-content">
          <div>费用信息</div>
          <div class="fsindex-detail-content-table">
            <div class="fsindex-detail-content-table-th">
              <div class="">款号</div>
              <div class="">原因</div>
              <div class="">违约金</div>
            </div>
            <div class="fsindex-detail-content-table-td">
              <div class="">
                {{ obj.type_no }}
              </div>
              <div class="">
                {{ obj.reason }}
              </div>
              <div class="">
                {{ obj.amount }}
              </div>
            </div>
          </div>
        </div>
        <div class="fsindex-detail-content">
          <div>申请日期</div>
          <div>{{ obj.createtime }}</div>
        </div>
      </div>
      <div class="fsindex-detail" v-if="form.type == 4 && flow">
        <div class="fsindex-detail-title">审批详情</div>
        <div class="fsindex-detail-content">
          <div>工厂名</div>
          <div>{{ obj.factory_name }}</div>
        </div>
        <div class="fsindex-detail-content">
          <div>合同编号</div>
          <div>{{ obj.factory_contract_no }}</div>
        </div>
        <div class="fsindex-detail-content">
          <div>基本信息</div>
          <div class="fsindex-detail-content-table">
            <div class="fsindex-detail-content-table-th">
              <div class="">款号</div>
              <div class="">品名</div>
            </div>
            <div class="fsindex-detail-content-table-td">
              <div class="">
                {{ obj.type_no }}
              </div>
              <div class="">
                {{ obj.product_name }}
              </div>
            </div>
          </div>
        </div>
        <div class="fsindex-detail-content">
          <div>费用信息</div>
          <div class="fsindex-detail-content-table">
            <div class="fsindex-detail-content-table-th">
              <div class="">单价</div>
              <div class="">数量</div>
              <div class="">总价</div>
            </div>
            <div class="fsindex-detail-content-table-td">
              <div class="">
                {{ obj.price }}
              </div>
              <div class="">
                {{ obj.num }}
              </div>
              <div class="">
                {{ obj.amount }}
              </div>
            </div>
          </div>
        </div>
        <div class="fsindex-detail-content">
          <div>用途</div>
          <div>{{ obj.purpose }}</div>
        </div>
        <div class="fsindex-detail-content">
          <div>凭证</div>
          <div class="fsindex-detail-content-pz">
            <el-image
              :src="item"
              mode="aspectFit"
              @click="onPredivel - image(item)"
              v-for="(item, index) in obj.images"
              fit="contain"
              :key="item"
              :preview-src-list="obj.images"
            ></el-image>
          </div>
        </div>
      </div>
      <div class="fsindex-detail" v-if="form.type == 5 && flow">
        <div class="fsindex-detail-title">审批详情</div>
        <div class="fsindex-detail-content">
          <div>工厂名</div>
          <div>{{ obj.factory_name }}</div>
        </div>
        <div class="fsindex-detail-content">
          <div>费用信息</div>
          <div class="fsindex-detail-content-table">
            <div class="fsindex-detail-content-table-th">
              <div class="">款号</div>
              <div class="">工序单号</div>
            </div>
            <div class="fsindex-detail-content-table-td">
              <div class="">
                {{ obj.type_no }}
              </div>
              <div class="">
                {{ obj.working_number }}
              </div>
            </div>
          </div>
        </div>
        <div class="fsindex-detail-content">
          <div>费用信息</div>
          <div class="fsindex-detail-content-table">
            <div class="fsindex-detail-content-table-th">
              <div class="">单价</div>
              <div class="">数量</div>
              <div class="">总价</div>
            </div>
            <div class="fsindex-detail-content-table-td">
              <div class="">
                {{ obj.price }}
              </div>
              <div class="">
                {{ obj.num }}
              </div>
              <div class="">
                {{ obj.amount }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="fsindex-detail" v-if="form.type == 6 && flow">
        <div class="fsindex-detail-title">审批详情</div>
        <div class="fsindex-detail-content" v-if="obj.factory_contract_no">
          <div>工厂合同号</div>
          <div>{{ obj.factory_contract_no }}</div>
        </div>
        <div class="fsindex-detail-content" v-if="obj.factory_name">
          <div>供应商</div>
          <div>{{ obj.factory_name }}</div>
        </div>
        <div class="fsindex-detail-content" v-if="obj.product_name">
          <div>款名</div>
          <div>{{ obj.product_name }}</div>
        </div>
        <div class="fsindex-detail-content">
          <div>基本信息</div>
          <div class="fsindex-detail-content-table">
            <div class="fsindex-detail-content-table-th">
              <div class="">成品加工单</div>
              <div class="">款号</div>
            </div>
            <div class="fsindex-detail-content-table-td">
              <div class="">
                {{ obj.processing_code }}
              </div>
              <div class="">
                {{ obj.type_no }}
              </div>
            </div>
          </div>
          <div
            @click="onPredivel(obj.img)"
            class="fsindex-detail-content-pdf"
            style="margin-top: 10px"
            v-if="obj.img"
          >
            <el-image :src="obj.img" mode="aspectFit"></el-image>
            <div>图片</div>
            <uni-icons type="eye" size="20"></uni-icons>
          </div>
        </div>

        <div class="fsindex-detail-content">
          <div>核价编码</div>
          <div class="fsindex-detail-content-table">
            <div class="fsindex-detail-content-table-th">
              <div class="">大货核价编码</div>
              <div class="">实付核价编码</div>
            </div>
            <div class="fsindex-detail-content-table-td">
              <div class="">
                {{ obj.big_pricing_number }}
              </div>
              <div class="">
                {{ obj.pay_pricing_number }}
              </div>
            </div>
          </div>
        </div>

        <div class="fsindex-detail-content">
          <div>价格变动</div>
          <div class="fsindex-detail-content-table">
            <div class="fsindex-detail-content-table-th">
              <div class="">大货总价</div>
              <div class="">实付总价</div>
              <div class="">差价</div>
            </div>
            <div class="fsindex-detail-content-table-td">
              <div class="">
                {{ obj.process_pricing_price }}
              </div>
              <div class="">
                {{ obj.pay_process_price }}
              </div>
              <div
                class=""
                :style="{
                  color: obj.difference_price > 0 ? '#dd524d' : '#4cd964',
                }"
              >
                {{ obj.difference_price }}
              </div>
            </div>
          </div>
        </div>
        <div class="fsindex-detail-content">
          <div>核价单备注</div>
          <div>{{ obj.remarks }}</div>
        </div>
        <div class="fsindex-detail-content">
          <div>调整原因</div>
          <div>{{ obj.reason }}</div>
        </div>
      </div>

      <div class="fsindex-detail" v-if="form.type == 7 && flow">
        <div class="fsindex-detail-title">审批详情</div>
        <div class="fsindex-detail-content" v-if="obj.factory_contract_no">
          <div>创建人</div>
          <div>{{ obj.adduser }}</div>
        </div>
        <div class="fsindex-detail-content" v-if="obj.factory_name">
          <div>工厂</div>
          <div>{{ obj.factory_name }}</div>
        </div>
        <div class="fsindex-detail-content" v-if="obj.product_name">
          <div>年/月</div>
          <div>{{ obj.recon_time }}</div>
        </div>
        <div class="fsindex-detail-content" v-if="obj.product_name">
          <div>应付金额</div>
          <div>{{ obj.pay_amount }}</div>
        </div>
      </div>

      <div class="fsindex-audit" v-if="flow">
        <div class="fsindex-audit-title">审批流程</div>
        <div class="fsindex-audit-module">
          <div class="fsindex-audit-module-step">
            <div class="fsindex-audit-module-step-photo">
              <el-image :src="sponsor.avatarurl" mode=""></el-image>
              <el-image :src="D" mode=""></el-image>
            </div>

            <div class="fsindex-audit-module-step-content">
              <div class="fsindex-audit-module-step-content-one">
                <div class="fsindex-audit-module-step-content-one-one">
                  <div class="">
                    {{ sponsor.username }}
                  </div>
                  <div class="">
                    {{ sponsor.dateline }}
                  </div>
                </div>
                <div
                  class="fsindex-audit-module-step-content-one-two"
                  style="color: #41cb33"
                >
                  发起审批
                </div>
              </div>
            </div>
          </div>
          <template v-for="(item, index) in flow">
            <div
              class="fsindex-audit-module-step"
              v-if="
                item.process_type != 'node-msg' &&
                item.process_type != 'node-end'
              "
              :key="item.id"
            >
              <div class="fsindex-audit-module-step-photo">
                <el-image :src="item.avatarurl" mode=""></el-image>
                <el-image
                  :src="
                    item.process_type == 'node-start'
                      ? D
                      : item.is_ok == 'ok'
                      ? D
                      : item.is_ok == 'Back'
                      ? X
                      : ''
                  "
                  v-if="item.is_ok"
                  mode=""
                ></el-image>
              </div>
              <div
                class="fsindex-audit-module-step-content"
                :style="{
                  borderLeft:
                    index + 1 == flow.length ? '2px solid #FFFFFF' : '',
                }"
              >
                <div class="fsindex-audit-module-step-content-one">
                  <div class="fsindex-audit-module-step-content-one-one">
                    <div class="">
                      {{ item.username }}
                    </div>
                    <div class="">
                      {{ item.dateline }}
                    </div>
                  </div>
                  <div
                    class="fsindex-audit-module-step-content-one-two"
                    :style="{
                      color:
                        item.is_ok == 'ok'
                          ? '#41cb33'
                          : item.is_ok == 'Back'
                          ? '#D83A30'
                          : '#3376FF',
                    }"
                  >
                    {{
                      item.is_ok == "ok"
                        ? "已通过"
                        : item.is_ok == "Back"
                        ? "已拒绝"
                        : item.is_btn == 1
                        ? "审核中"
                        : ""
                    }}
                  </div>
                </div>
                <div
                  class="fsindex-audit-module-step-content-two"
                  v-if="item.remark"
                >
                  “{{ item.remark }}”
                  <div
                    class="fsindex-audit-module-step-content-image"
                    v-if="item.images"
                  >
                    <el-image
                      :src="i"
                      mode="aspectFit"
                      @click="onPredivel - image(i)"
                      v-for="(i, index) in item.images"
                      fit="contain"
                      :preview-src-list="item.images"
                      :key="i"
                    ></el-image>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="fsindex-audit-module-step"
              v-else-if="
                item.process_type != 'node-msg' &&
                item.process_type == 'node-end'
              "
              :key="item.id"
            >
              <div class="fsindex-audit-module-step-photo">
                <el-image :src="end" mode=""></el-image>
              </div>
              <div
                class="fsindex-audit-module-step-content"
                :style="{
                  borderLeft:
                    index + 1 == flow.length ? '2px solid #FFFFFF' : '',
                }"
              >
                <div class="fsindex-audit-module-step-content-one">
                  <div class="fsindex-audit-module-step-content-one-one">
                    <div class="">结束</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="fsindex-audit-module-step" v-else>
              <div class="fsindex-audit-module-step-photo">
                <el-image :src="T" mode=""></el-image>
                <el-image
                  :src="
                    item.process_type == 'node-start'
                      ? D
                      : item.is_ok == 'ok'
                      ? D
                      : item.is_ok == 'Back'
                      ? X
                      : ''
                  "
                  v-if="item.is_ok"
                ></el-image>
              </div>

              <div
                class="fsindex-audit-module-step-content"
                :style="{
                  borderLeft:
                    index + 1 == flow.length ? '2px solid #FFFFFF' : '',
                }"
              >
                <div class="fsindex-audit-module-step-content-one">
                  <div class="fsindex-audit-module-step-content-one-one">
                    <div class="">
                      {{ sponsor.status == 1 ? "已" : "" }}抄送{{
                        item.msg_list.length
                      }}人
                    </div>
                  </div>
                  <div class="fsindex-audit-module-step-content-one-three">
                    <div class="" v-for="e in item.msg_list" :key="e.id">
                      <div class="">
                        <el-image :src="e.avatarurl" mode=""></el-image>
                        {{ e.username }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  postAdminPricingGetApproval_example,
  getAdminPricingGetdatalook,
  postAdminPricingLookpdf,
} from "@/api";
import { timestampToTime } from "@/utils/time.js";
import X from "./images/X.png";
import D from "./images/D.png";
import C from "./images/C.png";
import T from "./images/T.png";
import R from "./images/R.png";
import pdf from "./images/pdf.png";
import end from "./images/end.png";
import backup from "./images/backup.png";
import backdown from "./images/backdown.png";
import share from "./images/share.png";
export default {
  data() {
    return {
      X,
      D,
      C,
      T,
      R,
      pdf,
      end,
      backup,
      backdown,
      share,
      sponsor: "",
      flow: "",
      form: "",
      obj: "",
      printObj: {
        id: "printMe",
        popTitle: "",
        extraHead: ''
      },
    };
  },
  async mounted() {
    let obj = await this.$route.query;
    this.form = obj;
    await this.postAdminPricingGetApproval_example(obj);
    await this.getAdminPricingGetdatalook(this.form);
  },
  methods: {
    // 关联详情
    onLookRelation(obj) {
      console.log("obj", obj);
      let query = {
        id: obj.id,
        type: obj.type,
        run_id: obj.run_id,
      };
      this.$router.push({ name: "contractruniddetail", query });
    },
    onLookContract(fileid) {
      let obj = {
        fileid,
      };
      postAdminPricingLookpdf(obj).then((res) => {
        console.log("合同----》", res);
        window.open(res.data.downloadUrl);
        // this.pdfurl = res.data.downloadUrl
        // this.detaillistdialogVisiblecontract = true
      });
      // window.open(url);
    },
    async postAdminPricingGetApproval_example() {
      let res = await postAdminPricingGetApproval_example(this.form);
      console.log("res--------->", res);
      let data = res.data;
      res.data.sponsor.dateline = timestampToTime(
        data.sponsor.dateline * 1000,
        1
      ).substring(5, 16);
      res.data.flow.forEach((e) => {
        if (e.dateline) {
          e.dateline = timestampToTime(e.dateline * 1000, 1).substring(5, 16);
        }
      });
      this.sponsor = data.sponsor;
      this.flow = data.flow;
    },
    //合同详情
    async getAdminPricingGetdatalook(data) {
      await getAdminPricingGetdatalook(data)
        .then((res) => {
          console.log("合同详情", res);
          let data = res.data;
          this.obj = data;
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="scss" scoped>

/*去除页眉页脚*/
  @page{
    size:  auto;   /* auto is the initial value */
    margin: 3mm;  /* this affects the margin in the printer settings */
  }
 
  html{
    background-color: #FFFFFF;
    margin: 0;  /* this affects the margin on the html before sending to printer */
  }
 
  body{
    border: solid 1px blue ;
    margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
  }
  /*去除页眉页脚*/
.back {
  position: absolute;
  left: 40px;
}

.share:hover {
  background-color: rgba($color: #ffffff, $alpha: 0.1);
}

.share {
  border: none;
  position: absolute;
  right: 100px;
  background-color: rgba($color: #000000, $alpha: 0);
  padding: 5px;
  display: flex;
  cursor: pointer;

  > .el-image {
    width: 19px;
    height: 19px;
  }
}

.popuppl {
  background-color: #ffffff;
  width: 600px;
  border-radius: 20px;

  .popuppl-content {
    padding: 40px;

    > div:nth-child(1) {
      padding-bottom: 20px;
    }
  }

  .popuppl-button {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #f5f5f5;

    > div {
      width: 50%;
      text-align: center;
      height: 100px;
      line-height: 100px;
    }

    > div:nth-child(1) {
      border-right: 1px solid #f5f5f5;
    }

    > div:nth-child(2) {
      color: #41cb33;
    }
  }
}

.fsindex {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  //   align-items: center;

  .fsindex-back {
    position: fixed;
    top: 0;
    z-index: 10;

    > .el-image {
      width: 700px;
    }
  }

  .fsindex-head {
    width: 100%;
    position: relative;
    height: 150px;

    .fsindex-head-back {
      position: absolute;
      top: 0;

      > .el-image {
        width: 700px;
      }
    }

    .fsindex-head-div {
      box-shadow: 0 8px 24px 2px rgba($color: #000000, $alpha: 0.08);
      position: absolute;
      top: 20px;
      left: 24px;
      width: 654px;
      border-radius: 8px;
      background: #fff;
      margin: 0 auto;
      padding: 20px 24px;

      .fsindex-head-div-status {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        > div:nth-child(1) {
          font-size: 14px;
          font-weight: 800;
        }

        .fsindex-head-div-status-withdraw {
          background: rgba($color: #999999, $alpha: 0.2);
          color: #999999;
        }

        .fsindex-head-div-status-error {
          background: rgba($color: #d83a30, $alpha: 0.2);
          color: #d83a30;
        }

        .fsindex-head-div-status-success {
          background: rgba($color: #41cb33, $alpha: 0.2);
          color: #41cb33;
        }

        .fsindex-head-div-status-blue {
          background: rgba($color: #3376ff, $alpha: 0.2);
          color: #3376ff;
        }

        > div:nth-child(2) {
          border-radius: 4px;
          padding: 2px 10px;
          font-size: 14px;
          font-weight: 800;
          margin-left: 10px;
        }
      }

      .fsindex-head-div-user {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        > div:nth-child(1) {
          display: flex;
          align-items: center;

          > .el-image {
            width: 30px;
            height: 30px;
            border: 2px solid #f19021;
            border-radius: 50%;
            margin-right: 20px;
          }
        }

        > div:nth-child(2) {
          font-size: 14px;
          color: #999999;
        }
      }
    }
  }

  .fsindex-detail {
    width: 654px;
    border-radius: 8px;
    background: #fff;
    margin: 0 24px;
    padding: 24px;
    box-shadow: 0 8px 24px 2px rgba($color: #000000, $alpha: 0.08);
    .fsindex-detail-title {
      font-weight: 800;
      margin-bottom: 20px;
    }

    .fsindex-detail-content {
      margin-bottom: 20px;
      font-size: 14px;
      .fsindex-detail-content-pz {
        display: flex;
        flex-wrap: wrap;
        > :nth-child(3n) {
          margin-right: 0;
        }
        > .el-image {
          border: 1px solid #f5f5f5;
          width: 80px;
          height: 80px;
          margin-right: 20px;
          margin-bottom: 10px;
        }
      }
      .fsindex-detail-content-table {
        .fsindex-detail-content-table-th {
          display: flex;

          > div {
            width: 100%;
            text-align: center;
            height: 30px;
            line-height: 30px;
            border-top: 1px solid #ebeef5;
            border-bottom: 1px solid #ebeef5;
            border-right: 1px solid #ebeef5;
            font-size: 14px;
            font-weight: bold;
            color: #2f353e;
            padding: 10px;
            background-color: #f7f7f7;
          }

          > div:nth-child(1) {
            border-left: 1px solid #ebeef5;
          }
        }

        .fsindex-detail-content-table-td {
          display: flex;

          > div {
            width: 100%;
            text-align: center;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #ebeef5;
            border-right: 1px solid #ebeef5;
            font-size: 14px;
            padding: 10px;
          }

          > div:nth-child(1) {
            border-left: 1px solid #ebeef5;
          }
        }
      }

      > .el-image {
        width: 30px;
        height: 30px;
        border-radius: 16px;
        margin-top: 20px;
      }

      > div:nth-child(1) {
        font-weight: 800;
        font-size: 12px;
        color: #646a73;
        margin-bottom: 6px;
      }

      .fsindex-detail-content-pdf {
        border: 1px solid #efefef;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        > div:nth-child(2) {
          width: 400px;
        }

        > div:nth-child(3) {
          font-size: 12px;
          color: #41cb33;
        }

        padding: 20px;

        > .el-image {
          width: 30px;
          height: 30px;
          border: 1px solid #f5f5f5;
          margin-right: 20px;
        }
      }
    }
  }

  .fsindex-audit {
    width: 654px;
    border-radius: 20px;
    background: #fff;
    margin: 24px;
    padding: 24px;
    overflow: hidden;
    box-shadow: 0 8px 24px 2px rgba($color: #000000, $alpha: 0.08);

    .fsindex-audit-title {
      font-weight: 800;
    }

    .fsindex-audit-module {
      padding: 24px 0;

      .fsindex-audit-module-step {
        display: flex;

        .fsindex-audit-module-step-photo {
          position: relative;
          z-index: 1;
          width: 40px;
          height: 40px;

          border: 10px solid #ffffff;

          > .el-image:nth-child(1) {
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }

          > .el-image:nth-child(2) {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
            right: -5px;
          }
        }
      }

      .fsindex-audit-module-step-content {
        margin-top: 10px;
        border-left: 1px solid #3376ff;
        padding-left: 40px;
        margin-left: -30px;
        padding-bottom: 30px;
        min-height: 60px;
        .fsindex-audit-module-step-content-image {
          display: flex;
          flex-wrap: wrap;
          margin-top: 10px;
          > .el-image {
            border: 1px solid #cfd3d6;
            width: 80px;
            height: 80px;
            margin-right: 10px;
            margin-bottom: 10px;
          }
        }
        .fsindex-audit-module-step-content-one {
          width: 560px;
          .fsindex-audit-module-step-content-one-one {
            display: flex;
            justify-content: space-between;
            align-items: center;

            > div:nth-child(1) {
              font-size: 14px;
            }

            > div:nth-child(2) {
              font-size: 12px;
              color: #646a73;
            }
          }

          .fsindex-audit-module-step-content-one-two {
            color: #3376ff;
            font-size: 14px;
            font-weight: 800;
          }
        }

        .fsindex-audit-module-step-content-two {
          width: 460px;
          background-color: #f7f7f7;
          padding: 10px 20px;
          border-radius: 20px;
          font-size: 12px;
          margin-top: 20px;
        }

        .fsindex-audit-module-step-content-one-three {
          display: flex;
          flex-wrap: wrap;

          > div {
            margin-top: 20px;
            margin-right: 20px;
            background-color: #f7f7f7;
            height: 40px;
            border-radius: 40px;
            font-size: 12px;
            display: inline-block;
            padding: 0 20px;

            > div {
              display: flex;
              align-items: center;
              height: 40px;

              > .el-image {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 10px;
              }
            }
          }
        }
      }
    }
  }

  .fsindex-button {
    position: fixed;
    bottom: 0;
    background: #fff;
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    z-index: 10;
    border-top: 1px solid #efefef;
    padding-bottom: 30px;

    .fsindex-button-div {
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      width: 702px;

      > div {
        display: flex;
      }

      .fsindex-button-div-i {
        > i {
          margin-right: 3px;
        }

        display: flex;
        align-items: center;
        margin-right: 15px;
        font-size: 12px;
      }

      .fsindex-button-div-button {
        .fsindex-button-div-button-withdraw {
          font-size: 12px;
          border: 1px solid #3376ff;
          color: #3376ff;
          border-radius: 2px;
          padding: 10px 30px;
          margin-left: 30px;
          display: flex;
          align-items: center;
        }

        .fsindex-button-div-button-no {
          margin-left: 30px;
          font-size: 12px;
          border: 1px solid #d83a30;
          color: #d83a30;
          border-radius: 2px;
          padding: 10px 30px;
          display: flex;
          align-items: center;
        }

        .fsindex-button-div-button-yes {
          font-size: 12px;
          border: 1px solid #41cb33;
          color: #41cb33;
          border-radius: 2px;
          padding: 10px 30px;
          margin-left: 30px;
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
</style>
